<script setup lang="ts">
import { ref } from "vue"

const emit = defineEmits(["changState"])
import { ElMessage, UploadProps, UploadUserFile } from "element-plus"

const fileList = ref<UploadUserFile[]>([])

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePreview: UploadProps["onPreview"] = (file) => {
  console.log(file)
}
const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 300) {
    ElMessage.error("上次的文件最大尺寸为300m")
    return false
  }
  return true
}
const AvatarUploadSuccess = (res) => {
  fileList.value = JSON.parse(res.data)
}
const fileOver = function () {
  emit("changState", {
    state: 3
  })
}
</script>

<template>
  <div class="w-full h-full">
    <el-container class="h-full">
      <el-header height="10%">
        <div class="title">添加本次培训需要的文件</div>
      </el-header>
      <el-main>
        <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          action="http://192.168.2.25:5173/api/UploadFile/UploadTrainFiles"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          name="formFile"
          :on-success="AvatarUploadSuccess"
          :before-upload="beforeUpload"
        >
          <el-button type="primary">点击上传</el-button>
          <template #tip>
            <div class="el-upload__tip">单文件最大为300MB</div>
          </template>
        </el-upload>
      </el-main>
      <el-footer height="10%">
        <el-button type="primary">返回上一步</el-button>
        <el-button type="primary" @click="fileOver">开始会议</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped>
.title {
  width: 100%;
  height: 100%;
  font-size: 30px;
  color: #c2c87a;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
